<template>
  <div class="title-tips">
    <img :src="src" alt="" v-if="src" />
    <div class="name">
      <span :class="{'title-src': src}">{{ name }}</span>

      <el-tooltip placement="top" v-if="tip" effect="dark">
        <div class="content-w" slot="content">{{tip}}</div>
        <img src="../img/question.png" alt="">
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  props: ['src', 'name', 'tip'],
}
</script>

<style lang="less" scoped>
.title-tips {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
img {
  width: 14px;
  height: 14px;
  margin-left: 8px;
  cursor: pointer;
}
.name {
  font-size: 14px;
  font-weight: 500;
  color: #262a30;
  display: flex;
  align-items: center;
}
.title-src {
  font-weight: 500;
  color: #262a30;
  font-size: 16px;
}
.content-w {
  max-width: 200px;
}
</style>
